//                     ___                             ___          ___
//       _____        /__/\         ___       ___     /  /\        /__/\
//      /  /::\       \  \:\       /  /\     /  /\   /  /::\       \  \:\
//     /  /:/\:\       \  \:\     /  /:/    /  /:/  /  /:/\:\       \  \:\
//    /  /:/~/::\  ___  \  \:\   /  /:/    /  /:/  /  /:/  \:\  _____\__\:\
//   /__/:/ /:/\:|/__/\  \__\:\ /  /::\   /  /::\ /__/:/ \__\:\/__/::::::::\
//   \  \:\/:/~/:/\  \:\ /  /://__/:/\:\ /__/:/\:\\  \:\ /  /:/\  \:\~~\~~\/
//    \  \::/ /:/  \  \:\  /:/ \__\/  \:\\__\/  \:\\  \:\  /:/  \  \:\  ~~~
//     \  \:\/:/    \  \:\/:/       \  \:\    \  \:\\  \:\/:/    \  \:\
//      \  \::/      \  \::/         \__\/     \__\/ \  \::/      \  \:\
//       \__\/        \__\/                           \__\/        \__\/



//*
// The button that activates the footnote. By default, this will appear as a
// flat button that has an ellipse contained inside of it.

// @state .is-active            - The associated popover has been activated and is visible.

// @since 2.1.0
// @author Chris Sauve

.bigfoot-footnote__button {
  // POSITIONING
  position: relative;
  z-index: 5;
  top: $button-vertical-adjust;

  // DISPLAY AND SIZING
  box-sizing: border-box;
  -moz-box-sizing: border-box;;
  display: inline-block;
  padding: $button-per-side-padding;
  margin: 0 $button-right-margin 0 $button-left-margin;

  // BACKDROP
  border: none;
  border-radius: $button-border-radius;
  cursor: pointer;
  background-color: rgba($button-color, $button-standard-opacity);
  backface-visibility: hidden;

  // TEXT
  font-size: 1rem;
  line-height: 0;
  vertical-align: middle;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;

  // TRANSITIONS
  transition-property: $button-transition-properties;
  transition-duration: $popover-transition-default-duration;

  &:hover,
  &:focus {
    outline: none;
    background-color: rgba($button-hovered-color, $button-hovered-opacity);
  }

  &:active {
    background-color: rgba($button-activating-color, $button-activating-opacity);
  }

  &.is-active {
    background-color: rgba($button-active-color, $button-active-opacity);
    transition-delay: $button-active-style-delay;
  }

  // Clearfix
  &:after {
    content: '';
    display: table;
    clear: both;
  }
}





//       _____         ___                   ___
//      /  /::\       /  /\         ___     /  /\
//     /  /:/\:\     /  /::\       /  /\   /  /:/_
//    /  /:/  \:\   /  /:/\:\     /  /:/  /  /:/ /\
//   /__/:/ \__\:| /  /:/  \:\   /  /:/  /  /:/ /::\
//   \  \:\ /  /://__/:/ \__\:\ /  /::\ /__/:/ /:/\:\
//    \  \:\  /:/ \  \:\ /  /://__/:/\:\\  \:\/:/~/:/
//     \  \:\/:/   \  \:\  /:/ \__\/  \:\\  \::/ /:/
//      \  \::/     \  \:\/:/       \  \:\\__\/ /:/
//       \__\/       \  \::/         \__\/  /__/:/
//                    \__\/                 \__\/

//*
// Each of the three circles forming the ellipse within the button.

// @since 2.1.0
// @author Chris Sauve

.bigfoot-footnote__button__circle {
  // DISPLAY AND SIZING
  display: inline-block;
  width: $button-inner-circle-size;
  height: $button-inner-circle-size;
  margin-right: $button-inner-circle-left-margin;
  float: left;

  // Gets rid of margin on the last circle
  &:last-child { margin-right: 0; }
}





//        ___          ___          ___                   ___                     ___
//       /  /\        /  /\        /__/\         ___     /  /\       ___         /__/\
//      /  /:/       /  /::\       \  \:\       /  /\   /  /::\     /  /\        \  \:\
//     /  /:/       /  /:/\:\       \  \:\     /  /:/  /  /:/\:\   /  /:/         \  \:\
//    /  /:/  ___  /  /:/  \:\  _____\__\:\   /  /:/  /  /:/~/::\ /__/::\     _____\__\:\
//   /__/:/  /  /\/__/:/ \__\:\/__/::::::::\ /  /::\ /__/:/ /:/\:\\__\/\:\__ /__/::::::::\
//   \  \:\ /  /:/\  \:\ /  /:/\  \:\~~\~~\//__/:/\:\\  \:\/:/__\/   \  \:\/\\  \:\~~\~~\/
//    \  \:\  /:/  \  \:\  /:/  \  \:\  ~~~ \__\/  \:\\  \::/         \__\::/ \  \:\  ~~~
//     \  \:\/:/    \  \:\/:/    \  \:\          \  \:\\  \:\         /__/:/   \  \:\
//      \  \::/      \  \::/      \  \:\          \__\/ \  \:\        \__\/     \  \:\
//       \__\/        \__\/        \__\/                 \__\/                   \__\/

//*
// The container for the button and popover. This is required so that the popover
// is guaranteed to have a relatively-positioned container, and to help with the
// positioning calculation.

// @since 2.1.0
// @author Chris Sauve

.bigfoot-footnote__container {
  display: inline-block;
  position: relative;
  text-indent: 0;
}





//        ___       ___                     ___
//       /  /\     /  /\       ___         /__/\         ___
//      /  /::\   /  /::\     /  /\        \  \:\       /  /\
//     /  /:/\:\ /  /:/\:\   /  /:/         \  \:\     /  /:/
//    /  /:/~/://  /:/~/:/  /__/::\     _____\__\:\   /  /:/
//   /__/:/ /://__/:/ /:/___\__\/\:\__ /__/::::::::\ /  /::\
//   \  \:\/:/ \  \:\/:::::/   \  \:\/\\  \:\~~\~~\//__/:/\:\
//    \  \::/   \  \::/~~~~     \__\::/ \  \:\  ~~~ \__\/  \:\
//     \  \:\    \  \:\         /__/:/   \  \:\          \  \:\
//      \  \:\    \  \:\        \__\/     \  \:\          \__\/
//       \__\/     \__\/                   \__\/

@include print-styles;
